<template>
  <div class="player">
    <div class="song-info">
      <span>{{singer.name}}</span>
      <span>{{singer.singerName}}</span>
    </div>
    <div class="song-pic">
      <img :src="singer.cover" alt />
    </div>
    <div class="song-control">
      <audio :src="songUrl" controls autoplay></audio>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      songUrl: "",
      singer: {},
    };
  },
  created() {
    this.getData();
    this.getStoreSinger();
  },
  methods: {
    getData() {
      axios
        .get("/jsososo/song/urls", {
          params: {
            id: this.$route.params.id,
          },
        })
        .then((res) => {
          // console.log(res,data)
          this.songUrl = res.data.data[this.$route.params.id];
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getStoreSinger() {
      console.log(this.$store.state.singer);
      console.log(Object.keys(this.$store.state.singer).length);
      if (Object.keys(this.$store.state.singer).length != 0) {
        this.singer = this.$store.getters.singer;
        sessionStorage.setItem(
          "singer",
          JSON.stringify(this.$store.state.singer)
        );
      } else {
        this.singer = JSON.parse(sessionStorage.getItem("singer"));
      }
    },
  },
};
</script>
<style scoped>
</style>